<script setup lang="ts">
import { useRouter } from "vue-router"

const router = useRouter()
</script>

<template>
  <div class="error-container flex-center">
    <img class="error-img" src="@/assets/page/error/404.svg" />
    <div class="error-wrap">
      <div class="error-title">您访问的页面不存在！</div>
      <div class="error-msg">请检查您输入的网址是否正确，点击下面按钮返回首页</div>
      <el-button type="primary" round @click="router.push('/')">返回首页</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.error-container {
  height: 100%;
  flex-direction: row;

  .error-img {
    width: 350px;
  }

  .error-wrap {
    margin-left: 50px;

    .error-title {
      font-size: 22px;
      font-weight: 600;
    }

    .error-msg {
      font-size: 13px;
      color: var(--el-color-info);
      margin: 10px 0 30px 0;
    }
  }
}
</style>